<template>
    <div>
        我是user
      <div class="user-list">

        <!--动态路由   使用v-for需要加上一个key值,否则会有一个警告 -->
        <router-link style="padding: 10px;" :to="{ path:'/user/' + item.tip + '/' + item.id,query:{info:'follow'} }"  v-for="(item,index) of userList" :key="index">

          {{ item.userName }}

        </router-link>

        <div class="user-info" v-if="userInfo.userName" style="font-size: 20px">
          <p>姓名：{{ userInfo.userName }}</p>
          <p>性别：{{ userInfo.sex }}</p>
          <p>爱好：{{ userInfo.hobby }}</p>
        </div>

        <hr/>

        <div v-if="userInfo.userName" class="info-list" style="font-size: 20px;">

          <!-- query字符串传参 -->
          <!--<router-link exact to="?info=follow">他的关注</router-link>-->
          <!--<router-link exact to="?info=share">他的分享</router-link>-->

          <router-link exact :to="{path:'',query:{info:'follow'}}">他的关注</router-link>
          <router-link exact :to="{path:'',query:{info:'share'}}">他的分享</router-link>

          <div> {{ $route.query }} </div>

        </div>

      </div>
    </div>
</template>

<script>
  let data = [
    {
      id:1,
      tip:'vip',
      userName:"leo1",
      sex:'男',
      hobby:'写代码'
    },
    {
      id:2,
      tip:'vip',
      userName:"leo2",
      sex:'男',
      hobby:'唱歌'
    },
    {
      id:3,
      tip:'common',
      userName:"leo3",
      sex:'男',
      hobby:'读书'
    }
  ]
  export default {

    methods:{
        getData(){
          let id=this.$route.params.id;
          if(id){
            this.userInfo=this.userList.filter(function (item){
              return item.id==id;
            })[0];
          }else{
            this.userInfo={
              userName: null
            };
          }
        }
    },
    data(){
      return {
        userList:data,
        userInfo:{}
      }
    },
    created(){//生命周期钩子函数，渲染组件的时候会调用一次，复用这个组件不会被再次调用
      this.getData();
    },
    //监控$route路由信息对象
    watch:{
      //地址一旦发生变化，$route会重新生成一个路由信息对象,然后执行里面的函数
      $route(){
        this.getData();
      }
    }
  }
</script>

<style>

</style>
